@font-face {
  font-family: load;
  src: url('../font/loading.ttf');
}

.loading {
  position: relative;
  @include square(100%);
  background-image: url("../image/loading.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;

  .progress {
    position: relative;
    top: 81.4%;

    ul {
      text-align: center;
      li {
        @include square(px2rem(8.3px));
        //background-color: #db183d;
        background-color: #c7991b;
        border-radius: 10rem;
        display: inline-block;
        margin: 0 px2rem(2px);
        $t: 3s;
        &:nth-child(1) {
          animation: load1 $t linear infinite;
          -webkit-animation: load1 $t linear infinite;
        }
        &:nth-child(2) {
          animation: load2 $t linear infinite;
          -webkit-animation: load2 $t linear infinite;
        }
        &:nth-child(3) {
          animation: load3 $t linear infinite;
          -webkit-animation: load3 $t linear infinite;
        }
        &:nth-child(4) {
          animation: load4 $t linear infinite;
          -webkit-animation: load4 $t linear infinite;
        }
        &:nth-child(5) {
          animation: load5 $t linear infinite;
          -webkit-animation: load5 $t linear infinite;
        }
      }
    }

    .word {
      margin-top: px2rem(10px);
      text-align: center;
      @include font-dpr(10px);
      color: #bd9f06;
      font-family: load;
      font-size: px2rem(12px);
      span {
        font-size: px2rem(12px);
      }
    }
  }
}

@keyframes load1 {
  from {
    background-color: #db183d;
  }
  20% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@-webkit-keyframes load1 {
  from {
    background-color: #db183d;
  }
  20% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@keyframes load2 {
  from {
    background-color: #c7991b;
  }
  20% {
    background-color: #db183d;
  }
  40% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@-webkit-keyframes load2 {
  from {
    background-color: #c7991b;
  }
  20% {
    background-color: #db183d;
  }
  40% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@keyframes load3 {
  from {
    background-color: #c7991b;
  }
  20% {
    background-color: #c7991b;
  }
  40% {
    background-color: #db183d;
  }
  60% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@-webkit-keyframes load3 {
  from {
    background-color: #c7991b;
  }
  20% {
    background-color: #c7991b;
  }
  40% {
    background-color: #db183d;
  }
  60% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@keyframes load4 {
  from {
    background-color: #c7991b;
  }
  40% {
    background-color: #c7991b;
  }
  60% {
    background-color: #db183d;
  }
  80% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@-webkit-keyframes load4 {
  from {
    background-color: #c7991b;
  }
  40% {
    background-color: #c7991b;
  }
  60% {
    background-color: #db183d;
  }
  80% {
    background-color: #c7991b;
  }
  to {
    background-color: #c7991b;
  }
}

@keyframes load5 {
  from {
    background-color: #c7991b;
  }
  60% {
    background-color: #c7991b;
  }
  80% {
    background-color: #db183d;
  }
  to {
    background-color: #c7991b;
  }
}

@-webkit-keyframes load5 {
  from {
    background-color: #c7991b;
  }
  60% {
    background-color: #c7991b;
  }
  80% {
    background-color: #db183d;
  }
  to {
    background-color: #c7991b;
  }
}